<template>
<div class="seckill-wrap">
    <el-tabs v-model="activeMode" tab-position="left" @tab-click="handleModeClick">
        <el-tab-pane label="爆品秒抢" name="Explosive">
            <div class="btn-group clearfix" style="margin:0 0 10px 0">
                <el-button type="primary" icon="el-icon-circle-plus" @click="createLayer">添加商品</el-button>
                <el-button icon="el-icon-refresh" @click="refresh">刷新</el-button>
            </div>
            <div class="form-group clearfix" style="margin:0 0 10px 0">
                <el-form ref="form" :model="search" label-width="80px">
                    <el-form-item label="商品名称">
                        <el-input v-model="search.keywords" size="small" style="width:50%"></el-input>
                    </el-form-item>
                    <el-form-item label="报名时间">
                        <el-col :span="6">
                            <el-date-picker type="datetime" placeholder="选择日期" format="yyyy年MM月dd日 HH时mm分ss秒" value-format="yyyy-MM-dd HH:mm:ss" v-model="search.apply_start_at" size="small"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="6">
                            <el-date-picker type="datetime" placeholder="选择时间" format="yyyy年MM月dd日 HH时mm分ss秒" value-format="yyyy-MM-dd HH:mm:ss" v-model="search.apply_end_at" size="small"> size="small"</el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="秒抢时间">
                        <el-col :span="6">
                            <el-date-picker type="datetime" placeholder="选择日期" format="yyyy年MM月dd日 HH时mm分ss秒" value-format="yyyy-MM-dd HH:mm:ss" v-model="search.start_at" size="small"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="6">
                            <el-date-picker type="datetime" placeholder="选择时间" format="yyyy年MM月dd日 HH时mm分ss秒" value-format="yyyy-MM-dd HH:mm:ss" v-model="search.end_at" size="small"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch" size="mini">查询</el-button>
                        <el-button size="mini">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-tabs v-model="search.type" type="card" @tab-click="handleTypeClick" winth="40%">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane label="秒杀中" name="Normal"></el-tab-pane>
                <el-tab-pane label="报名中" name="Apply"></el-tab-pane>
                <el-tab-pane label="已结束" name="Finish"></el-tab-pane>
            </el-tabs>
            <el-table :data="seckillData.data" stripe style="width: 100%">
                <el-table-column prop="id" label="ID" width="80">
                </el-table-column>
                <el-table-column prop="img" label="商品图片" width="80">
                    <template slot-scope="scope">
                        <el-avatar :src="scope.row.good.avatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称" width="180">
                    <template slot-scope="scope">
                        {{scope.row.good.title}}
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="商品总数" width="80">
                </el-table-column>
                <el-table-column prop="min" label="最少参与人数" width="120">
                </el-table-column>
                <el-table-column prop="max" label="最大参与人数" width="120">
                </el-table-column>
                <el-table-column prop="apply_start_at" label="报名开始时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.apply_start_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="apply_end_at" label="报名结束时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.apply_end_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="start_at" label="秒杀开始时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.start_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="end_at" label="秒杀结束时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.end_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.status == 'Finish'" type="info">已结束</el-link>
                        <el-link v-else-if="scope.row.status == 'Normal'" type="danger">进行中</el-link>
                        <el-link v-else-if="scope.row.status == 'Wait'" type="warning">尚未开始</el-link>
                        <el-link v-else type="success">报名中</el-link>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="240">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.status == 1" type="danger">下架 &nbsp;</el-link>
                        <el-link v-if="scope.row.status == 0" type="primary">上架 &nbsp;</el-link>
                        <el-button @click="logs(scope.row)" type="text" size="small" v-if="scope.row.status == 'Finish'">记录</el-button>
                        <el-button @click="editGoods(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button class="t-delete-1" type="text" size="small" @click="getdelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="全年秒杀" name="Year">
            <div class="btn-group clearfix" style="margin:0 0 10px 0">
                <el-button type="primary" icon="el-icon-circle-plus" @click="createLayer">添加商品</el-button>
                <el-button icon="el-icon-refresh" @click="refresh">刷新</el-button>
            </div>
            <div class="form-group clearfix" style="margin:0 0 10px 0">
                <el-form ref="form" :model="search" label-width="80px">
                    <el-form-item label="商品名称">
                        <el-input v-model="search.keywords" size="small" style="width:50%"></el-input>
                    </el-form-item>
                    <el-form-item label="报名时间">
                        <el-col :span="6">
                            <el-date-picker type="datetime" placeholder="选择日期" format="yyyy年MM月dd日 HH时mm分ss秒" value-format="yyyy-MM-dd HH:mm:ss" v-model="search.apply_start_at" size="small"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="6">
                            <el-date-picker type="datetime" placeholder="选择时间" format="yyyy年MM月dd日 HH时mm分ss秒" value-format="yyyy-MM-dd HH:mm:ss" v-model="search.apply_end_at" size="small"> size="small"</el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="秒抢时间">
                        <el-col :span="6">
                            <el-date-picker type="datetime" placeholder="选择日期" format="yyyy年MM月dd日 HH时mm分ss秒" value-format="yyyy-MM-dd HH:mm:ss" v-model="search.start_at" size="small"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="6">
                            <el-date-picker type="datetime" placeholder="选择时间" format="yyyy年MM月dd日 HH时mm分ss秒" value-format="yyyy-MM-dd HH:mm:ss" v-model="search.end_at" size="small"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch" size="mini">查询</el-button>
                        <el-button size="mini">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-tabs v-model="search.type" type="card" @tab-click="handleTypeClick" winth="40%">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane label="秒杀中" name="Normal"></el-tab-pane>
                <el-tab-pane label="报名中" name="Apply"></el-tab-pane>
                <el-tab-pane label="已结束" name="Finish"></el-tab-pane>
            </el-tabs>
            <el-table :data="seckillData.data" stripe style="width: 100%">
                <el-table-column prop="id" label="ID" width="80">
                </el-table-column>
                <el-table-column prop="img" label="商品图片" width="80">
                    <template slot-scope="scope">
                        <el-avatar :src="scope.row.good.avatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称" width="180">
                    <template slot-scope="scope">
                        {{scope.row.good.title}}
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="商品总数" width="80">
                </el-table-column>
                <el-table-column prop="min" label="最少参与人数" width="120">
                </el-table-column>
                <el-table-column prop="max" label="最大参与人数" width="120">
                </el-table-column>
                <el-table-column prop="apply_start_at" label="报名开始时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.apply_start_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="apply_end_at" label="报名结束时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.apply_end_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="start_at" label="秒杀开始时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.start_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="end_at" label="秒杀结束时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.end_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.status == 'Finish'" type="info">已结束</el-link>
                        <el-link v-else-if="scope.row.status == 'Normal'" type="danger">进行中</el-link>
                        <el-link v-else-if="scope.row.status == 'Wait'" type="warning">尚未开始</el-link>
                        <el-link v-else type="success">报名中</el-link>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="140">
                    <template slot-scope="scope">
                        <!--<el-link v-if="scope.row.status == 1" type="danger">下架 &nbsp;</el-link>
                        <el-link v-if="scope.row.status == 0" type="primary">上架 &nbsp;</el-link><!-->

                        <el-button @click="editGoods(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button class="t-delete-1" type="text" size="small" @click="getdelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>

    <!-- S 添加商品 -->

    <el-dialog :title="goodsType == 1 ? '添加秒抢活动' : '编辑' " :visible.sync="createGoodsType" width="30%">
        <div class="good-main" @click="selectGoodLayer">
            <div class="good-avatar">
                <el-avatar :size="60">
                    <img :src="selectGoodInfo.avatar" v-if="selectGoodInfo" />
                    <img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                </el-avatar>
            </div>

            <div class="good-info" v-if="selectGoodInfo">
                <p>{{selectGoodInfo.title}}</p>
                <p>价格:￥{{selectGoodInfo.price}}</p>
            </div>
            <div class="good-null" v-else>暂未选择任何商品</div>
        </div>
        <div class="form-group clearfix" style="margin:0 0 10px 0">
            <el-form ref="form" :model="createForm" label-width="80px">
                <el-form-item label="报名时间">
                    <el-date-picker v-model="createForm.apply_time" type="datetimerange" align="right" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['8:00:00', '23:00:00']" value-format="yyyy-MM-dd HH:mm:ss" size="small">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="秒抢时间">
                    <el-date-picker v-model="createForm.start_time" type="datetimerange" align="right" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['8:00:00', '23:00:00']" value-format="yyyy-MM-dd HH:mm:ss" size="small">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input v-model="createForm.number" size="small" style="width:50%">
                        <template slot="append">份</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="秒抢券数" v-if="activeMode == 'Explosive'">
                    <el-input v-model="createForm.coupon_number" size="small" style="width:50%">
                        <template slot="append">张</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="开抢人数">
                    <el-input v-model="createForm.min" size="small" style="width:50%">
                        <template slot="append">人</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="最大人数">
                    <el-input v-model="createForm.max" size="small" style="width:50%">
                        <template slot="append">人</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="createForm.remark" size="small" style="width:50%">
                    </el-input>
                </el-form-item>
                <el-form-item v-if="goodsType == 1">
                    <el-button type="primary" @click="onSubmit('create')" size="mini">立即创建</el-button>
                    <el-button size="mini">取消</el-button>
                </el-form-item>
                <el-form-item v-else>
                    <el-button type="primary" @click="onSubmit('edit')" size="mini">确定保存</el-button>
                    <el-button size="mini">取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </el-dialog>

    <!-- E 添加商品 -->
    <!-- 选择商品 -->
    <el-dialog title="选择商品" :visible.sync="selectGood" width="50%">
        <div class="btn-group clearfix" style="margin:0 0 10px 0">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" style="width:50%" v-model="searchGoodKeywords"></el-input>
            <el-button type="primary" @click="handleSelectGoodSearch">搜索</el-button>
        </div>
        <el-table :data="goodsData.data" stripe highlight-current-row style="width: 100%" @row-click="handleSelectGood">
            <el-table-column prop="id" label="ID" width="60">
            </el-table-column>
            <el-table-column prop="avatar" label="商品图片" width="80">
                <template slot-scope="scope">
                    <el-avatar :src="scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称">
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="original_price" label="商品原价" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.original_price }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sale_count" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-link v-if="scope.row.status == 'Normal'" type="success">售卖中</el-link>
                    <el-link v-else type="info">下架</el-link>
                </template>
            </el-table-column>
            <div class="q-pagination" slot="append">
                <el-pagination background layout="prev, pager, next" :total="goodsData.total" @current-change="handleSelectGoodPageClick"></el-pagination>
            </div>
        </el-table>
    </el-dialog>
    <!-- End 选择商品 -->
    <div class="block">
        <el-pagination style="text-align: center;margin-top: 10px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="seckillData.current_page" :page-size="seckillData.per_page" layout="prev, pager, next, jumper" :total="seckillData.total">
        </el-pagination>
    </div>
    <el-drawer v-if="rowData" :title="'第【'+rowData.start_at+'】期'" :visible.sync="tableLayer" direction="rtl" size="50%" class="drawer" >
        <div class="good-main">
            <div class="good-avatar">
                <el-avatar :size="60">
                    <img :src="selectGoodInfo.avatar" v-if="selectGoodInfo" />
                    <img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                </el-avatar>
            </div>

            <div class="good-info" v-if="selectGoodInfo">
                <p>{{selectGoodInfo.title}}</p>
                <p>价格:￥{{selectGoodInfo.price}}</p>
            </div>
            <div class="good-null" v-else>暂未选择任何商品</div>
        </div>
        <el-table v-if="logData" :data="logData.data" >
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column property="user" label="头像" width="80">
                <template slot-scope="scope">
                    <el-avatar :src="scope.row.user.avatar" v-if="scope.row.user.avatar"></el-avatar>
                    <el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else></el-avatar>
                </template>
            </el-table-column>
            <el-table-column property="user.nickname" label="昵称" width="150"></el-table-column>
            <el-table-column property="updated_at" label="修改时间" width="200"></el-table-column>
            <el-table-column property="user.system" label="所属用户">
                <template slot-scope="scope">
                    <span v-if="scope.row.user.system == 'System'">系统用户</span>
                    <span v-else>普通用户</span>
                </template>
            </el-table-column>
            <el-table-column :property="status" label="状态" width="200">
                <template slot-scope="scope">
                    <el-link type="success" v-if="scope.row.status == 'Success'">成功</el-link>
                    <el-link type="danger" v-else-if="scope.row.status == 'Fail'">失败</el-link>
                    <el-link v-else>进行中</el-link>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.user.system != 'System'" @click="userInfoButton(scope.row)" type="text" size="small">用户信息</el-button>
                </template>
            </el-table-column>
            <div slot="append">
                <el-pagination
                    layout="prev, pager, next"
                    :total="logData.total" @current-change="UserPage">
                </el-pagination>
            </div>
        </el-table>
    </el-drawer>
    <el-dialog title="用户信息" :visible.sync="userInfoLayer" width="30%" center>
        <el-form ref="form" :model="userInfoData" label-width="80px">
            <el-form-item label="真实姓名">
                <el-input v-model="userInfoData.realname"></el-input>

            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="userInfoData.mobile"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input type="textarea" :value="userInfoData.province + userInfoData.city + userInfoData.county + userInfoData.address"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="userInfoLayer = false">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import Axios from 'axios';
import {
    formatDate
} from '../../../utils/dateFormat'
import {
    log
} from 'util';
export default {
    name: 'Seckill',
    data() {
        return {
            activeMode: 'Explosive',
            createGoodsType: false,
            selectGood: false,
            tableLayer: false,
            selectGoodInfo: null,
            rowData: null,
            userInfoLayer: false,
            userInfoData: [],
            search: {
                mode: 'Explosive',
                keywords: null,
                apply_start_at: null,
                apply_end_at: null,
                start_at: null,
                end_at: null,
                type: 'all'
            },
            searchGoodKeywords: null,
            createForm: {
                good_id: null,
                apply_time: null,
                start_time: null,
                number: 1,
                coupon_number: 1,
                min: 1,
                max: 999,
                remark: ''
            },
            seckillData: [],
            total: null,
            current_page: null,
            goodsData: [],
            multipleSelection: [],
            goodsType: 1,
            editGoods_id: null,
            logData: [],
            currentId:0
        }
    },

    mounted() {
        this.getData();
    },
    methods: {
        UserPage(){
             this.getUserlist(this.currentId);
        },
        userInfoButton(row) {
            this.userInfoLayer = true;
            this.userInfoData = row.user.default_address;

        },
        formatStatus(status) {
            console.log(status);
            switch (status) {
                case 'Success':
                    return '秒抢成功';
                    break;
                case 'Fail':
                    return '秒抢失败';
                    break;
                default:
                    return '进行中'
                    break;
            }
        },
        handleModeClick(event) {
            console.log(event.index);
            this.search.mode = event.name;
            this.getData();
        },
        handleTypeClick(event) {
            this.search.type = event.name;
            this.getData();
        },
        onSearch() {
            this.getData();
        },
        handleSizeChange() {
            console.log(this.current_page);
        },
        handleCurrentChange(e) {

            this.getData({
                page: e
            })
        },
        logs(e) {
            this.logData = [];
            this.currentId = e.id;
            this.selectGoodInfo = e.good;
            this.rowData = e;
            this.getUserlist(e.id);
            this.tableLayer = true;
            
            

        },
        getUserlist(id,params = {}) {
            params.page = this.logData.current_page ? this.logData.current_page + 1 : 1
            Axios.get('/api/store/admin/seckill/logs/' +id, {
                params
            }).then((result, key) => {
                this.logData = result.data.data;
            }).catch(

            )
        },
        async getData(params = {}) {
            if (this.search.apply_start_at) {
                params.apply_start_at = this.search.apply_start_at;
            }
            if (this.search.apply_end_at) {
                params.apply_end_at = this.search.apply_end_at;
            }
            if (this.search.start_at) {
                params.start_at = this.search.start_at;
            }
            if (this.search.end_at) {
                params.end_at = this.search.end_at;
            }
            if (this.search.keywords) {
                params.keywords = this.search.keywords;
            }
            Axios.get('/api/store/admin/seckill/list/' + this.search.mode + '/' + this.search.type, {
                params: params
            }).then((result, key) => {
                this.seckillData = result.data.data;
            }).catch(

            )
        },
        async getGoodData(params = {}) {
            if (this.searchGoodKeywords) {
                params.keywords = this.searchGoodKeywords;
            }
            params.page = params.page ? params.page : 1;
            console.log(params);
            Axios.get('/api/store/admin/seckill/good_list/', {
                params: params
            }).then((result, key) => {
                this.goodsData = result.data.data;
                this.total = result.data.data.last_page;
                this.current_page = result.data.data.current_page;
            }).catch(

            )
        },
        editGoods(item) {
            this.goodsType = 2;
            this.createGoodsType = true;
            let from = {};
            let data = [];
            from.apply_time = [item.apply_start_at, item.apply_end_at];
            from.start_time = [item.start_at, item.end_at];
            from.min = item.min;
            from.max = item.max;
            from.number = item.number;
            from.coupon_number = item.coupon_num;
            from.remark = item.remark;
            from.remark = item.remark;
            from.good_id = item.good_id;
            this.editGoods_id = item.id;
            this.createForm = from;
            let selectGoodInfo = {};
            selectGoodInfo.avatar = item.good.avatar;
            selectGoodInfo.title = item.good.title;
            selectGoodInfo.price = item.good.price;
            this.selectGoodInfo = selectGoodInfo;
        },
        handleSelectGood(row, column, event) {
            this.$confirm('是否选择该商品为秒杀商品?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.selectGoodInfo = row;
                this.createForm.good_id = row.id;
                this.selectGood = false;
                this.$message({
                    type: 'success',
                    message: '选择成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        handleSelectGoodPageClick(e) {
            console.log(e);
            this.getGoodData({
                page: e
            })
        },
        handleSelectGoodSearch() {
            this.getGoodData()
        },
        createLayer() {
            this.emptygoods();
            this.selectGoodInfo = null;
            this.goodsType = 1;
            console.log(this.goodsType);

            this.createGoodsType = true;
        },
        selectGoodLayer() {
            if (this.goodsData.length < 1) {
                this.getGoodData();
            }
            this.selectGood = true;
        },
        onSubmit(type) {
            switch (type) {
                case 'edit':

                    if (this.createForm.apply_time == null || this.createForm.start_time == null) {
                        this.$message.error('请选择时间');
                    } else {
                        let apply_end_at = this.createForm.apply_time[1];
                        let start_at = this.createForm.start_time[0];
                        let applyTime = new Date(this.createForm.apply_time[1]);
                        let startTime = new Date(this.createForm.start_time[0]);
                        if (startTime.getTime() < applyTime.getTime()) {
                            this.$message.error('报名时间不能大于秒抢时间');
                        } else if (this.createForm.good_id == null) {
                            this.$message.error('请选择商品');
                        } else {
                            let params = {};
                            params.type = this.activeMode;
                            params.good_id = this.createForm.good_id;
                            params.apply_start_at = this.createForm.apply_time[0];
                            params.apply_end_at = this.createForm.apply_time[1];
                            params.start_at = this.createForm.start_time[0];
                            params.end_at = this.createForm.start_time[1]
                            params.min = this.createForm.min;
                            params.max = this.createForm.max;
                            params.number = this.createForm.number;
                            params.coupon_num = this.createForm.coupon_number;
                            params.remark = this.createForm.remark;
                            Axios.post('/api/store/admin/seckill/edit/' + this.editGoods_id, params).then(res => {
                                this.$message({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                this.getData();
                                this.createGoodsType = false;
                            }).catch(err => {
                                console.log(err.response.data.message);
                                this.$message.error(err.response.data.message);
                            })
                        }
                    }
                    break;
                case 'create':
                    if (this.createForm.apply_time == null || this.createForm.start_time == null) {
                        this.$message.error('请选择时间');
                    } else {
                        let apply_end_at = this.createForm.apply_time[1];
                        let start_at = this.createForm.start_time[0];
                        let applyTime = new Date(this.createForm.apply_time[1]);
                        let startTime = new Date(this.createForm.start_time[0]);
                        if (startTime.getTime() < applyTime.getTime()) {
                            this.$message.error('报名时间不能大于秒抢时间');
                        } else if (this.createForm.good_id == null) {
                            this.$message.error('请选择商品');
                        } else {
                            let params = {};
                            params.type = this.activeMode;
                            params.good_id = this.createForm.good_id;
                            params.apply_start_at = this.createForm.apply_time[0];
                            params.apply_end_at = this.createForm.apply_time[1];
                            params.start_at = this.createForm.start_time[0];
                            params.end_at = this.createForm.start_time[1]
                            params.min = this.createForm.min;
                            params.max = this.createForm.max;
                            params.number = this.createForm.number;
                            if (this.activeMode == 'Explosive') {
                                params.coupon_num = this.createForm.coupon_number;
                            } else {
                                params.coupon_num = 0
                            }
                            console.log(params);
                            debugger
                            params.remark = this.createForm.remark;
                            Axios.post('/api/store/admin/seckill/create', params).then(res => {
                                this.$message({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                this.getData();
                                this.createGoodsType = false;
                            }).catch(err => {
                                console.log(err.response.data.message);
                                this.$message.error(err.response.data.message);
                            })
                        }
                    }

                    break;
            }
        },
        getdelete(id) {
            console.log(id);
            this.$confirm('确认移除秒抢吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                Axios.get('/api/store/admin/seckill/delete/' + id).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.data.message
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        refresh() {
            this.getData();
        },
        emptygoods() {
            Object.keys(this.createForm).forEach(key => {
                this.createForm[key] = null
            })
        },
    }
}
</script>

<style lang="less">
.form-group {
    border: 1px dashed #ebebeb;

    .el-form-item {
        margin-bottom: 10px !important;
    }

}

.good-main {
    padding: 14px;
    border: 1px solid #ebebeb;
    margin-bottom: 10px !important;
    display: grid;
    grid-template-columns: 65px 1fr;

    .good-info p {
        margin: .55rem 0;

    }

    div {
        display: inline-block;
        overflow: hidden;

        &.good-null {
            line-height: 60px;
        }
    }

    &>.el-avatar {
        width: 60px !important;
        height: 60px !important;
    }

}

.q-pagination {
    margin: 10px auto;
    text-align: center;
}

.drawer {
    .good-main {
        background: #f3f3f3;
        margin: 0 0 10px 0;
    }

}
</style>
